<template>
  <div>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="id" label="id"></el-table-column>
      <el-table-column prop="user.head_img" label="封面" width="180">
        <template slot-scope="scope">
          <img :src="scope.row.cover[0].url|filterURL" class="IMG" v-if="scope.row.cover[0]" />
          <img src="../assets/75期/bj1.jpg" class="IMG" v-else />
        </template>
      </el-table-column>
      <el-table-column prop="user.nickname" label="作者" width="180"></el-table-column>
      <el-table-column prop="title" label="标题"></el-table-column>
      <el-table-column label="按钮">
        <template slot-scope="scope">
          <!-- slot-scope="scope" -->
          <!-- slot-scope用来接收来自父组件的值，scope.row用来存放值，
          scope.$index用来存放索引-->
          <button @click="$router.push('/publish?id='+scope.row.id)">
            <!-- {{scope.$index}} -->
            编辑
            <!-- {{scope.row.user.nickname}} -->
          </button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      layout="total, sizes, prev, pager, next, jumper"
      :page-sizes="[2, 5, 8, 10]"
      @size-change="sizeChange"
      :page-size="pageSize"
      :total="total"
      @current-change="currentChange"
    ></el-pagination>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      pageSize: 5,
      pageIndex: 1,
      total: 0
    };
  },
  methods: {
    currentChange(index) {
      this.pageIndex = index;
      this.$axios
        .get("/post", {
          params: { pageIndex: this.pageIndex, pageSize: this.pageSize }
        })
        .then(res => {
          console.log(res);
          this.tableData = res.data.data;
        });
    },
    sizeChange(pageSize) {
      this.pageSize = pageSize;
      this.$axios
        .get("/post", {
          params: { pageIndex: this.pageIndex, pageSize: this.pageSize }
        })
        .then(res => {
          console.log(res);
          this.tableData = res.data.data;
        });
    }
  },
  created() {
    this.$axios
      .get("/post", {
        params: { pageIndex: this.pageIndex, pageSize: this.pageSize }
      })
      .then(res => {
        console.log(res);
        this.tableData = res.data.data;
        this.total = res.data.total;
      });
  }
};
</script>

<style lang="less" scoped>
.el-pagination {
  text-align: center;
  padding-top: 10px;
}
.IMG {
  width: 100px;
  height: 80px;
  object-fit: cover;
  //   padding-right: 20px;
}
button {
  //   width: 60px;
  padding: 10px 20px;
  //   height: 28px;
  color: #fff;
  background-color: blue;
  border: none;
  outline: none;
  border-radius: 15px;
  font-size: 12px;
}
</style>
